<template>
    <el-card>
<div>
    <!-- 头顶 -->
        <el-breadcrumb separator="/" class="a">
            <!-- :to="{ path: '/users' }"  跳转 -->
            <el-breadcrumb-item >首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="params" class="demo-form-inline">
            <el-form-item>
                <el-input :data="userList" style="width: 600px;" v-model="params.query" placeholder="请输入内容"></el-input>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button type="primary" @click="onAdd">添加用户</el-button>
            </el-form-item>     
        </el-form>
        
        <el-table class="aa"
                :data="userList"
                max-height="420"
                style="width: 100%">
            <el-table-column  label="#" type="index" />
            <el-table-column label="用户名" >
                <template slot-scope="scope">
                    {{ scope.row.username }}
                </template>
            </el-table-column>
            <el-table-column label="邮箱" >
                <template slot-scope="scope">
                    {{ scope.row.email }}
                </template>
            </el-table-column>
            <el-table-column label="手机" >
                <template slot-scope="scope">
                    {{ scope.row.mobile }}
                </template>
            </el-table-column>
            <el-table-column label="角色名" >
                <template slot-scope="scope">
                    {{ scope.row.role_name }}
                </template>
            </el-table-column>
            <el-table-column label="状态" >
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.mg_state"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        @change="switchChange(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
           
            <el-table-column label="操作" width="280px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary"
                        @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger"
                        @click="handleDelete(scope.row.id)">删除</el-button>
                    <el-button size="mini" type="warning" 
                        @click="handleJuese(scope.row)">分配角色</el-button>
                    </template>
            </el-table-column>

            
           

            <!-- 添加  -->
            <!-- 如果提示框不显示就在el-dialog中加：:append-to-body="true" -->
            <el-dialog
                title="添加管理员"
                :visible.sync="dialogVisible"
                width="30%" :append-to-body="true">
                <el-form ref="customform" :model="form" label-width="80px"
                    status-icon :rules="rules">
                <el-form-item label="用户账号" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password">
                    <el-input v-model="form.password"
                    type="password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
            </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onAddUser">确 定</el-button>
                </span>
            </el-dialog>
        </el-table>
            <!-- current-page当前页
                page-size：每页记录数
                page-sizes：每页记录数下拉列表，第一个数与每页记录数必须一致
                total：总记录数 -->
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.pagenum"
                :page-sizes="[1,5, 30, 50]"
                :page-size="params.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                >
            </el-pagination>
            <!-- 编辑 -->
            <el-dialog
                :visible.sync="dialogVisibles"
                width="30%">
                <el-form ref="customform" :model="bianJI" label-width="80px"
                                        status-icon :rules="rules">
                    <el-form-item label="用户id" prop="username">
                        <el-input v-model="bianJI.id"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="username">
                        <el-input v-model="bianJI.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="username">
                        <el-input v-model="bianJI.mobile"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibles = false">取 消</el-button>
                    <el-button type="primary" @click="onUpdUser">编 辑</el-button>
                </span>
            </el-dialog>
            <!-- 分配权限  -->
            <!-- 分配角色 -->
            <el-dialog
                    :visible.sync="dialogVisibless"
                    width="50%">
                <el-form ref="customform" :model="fenpeis" label-width="80px"
                                    status-icon :rules="rules" id="editform">
                    <p class="b">当前的用户:{{ fenpeis.username }}</p>
                    <p class="b">当前的角色:{{ fenpeis.role_name }}</p>
                    <p class="b">分配新角色:
                        <el-form-item slot-scope="" placeholder="请选择" >
                                <el-select v-model="fenPei.roleName" @change="selectRole">
                                    <el-option class="c" v-for="item in fenPei" :key="item.id" :label="item.roleName" :value="item.id" >
                                        
                                    </el-option>
                                </el-select>
                        </el-form-item>
                    </p>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisibless = false">取 消</el-button>
                    <el-button type="primary" @click="onFenpei" >编辑</el-button>
                </span>
                
            </el-dialog>
    </div>
</el-card>
</template>

<script>

export default {
   
    data(){
        return{
            userList:[],
            bianJI:[],
            //分配
            fenPei:[],
            value:[],
            uId:0,
            userId:"",
            // bianJI:{
            //     query:'',
            //     email:'',
            //     mobile:''
            // },
            fenpeis:{
                username:'',
                role_name:''
            },
            params:{
                query:'',
                pagenum:1,
                pagesize:5
            },
            form:{
                username:'',
                password:'',
                email:'',
                mobile:'',
            },
            rules:{

            },
            total:0,
            dialogVisible:false,
            dialogVisibles:false,
            dialogVisibless:false,
    }},
    methods:{
        selectRole(val){
            this.userId=val
            console.log(this.userId);
	    },
        //分配
        async onFenpei(){
            let {data} = await this.$http.put(`/api/private/v1/users/${this.fenpeis.id}/role`,
            {rid:this.userId});
            // this.userId=""
            this.initTable();
            this.dialogVisibless=false;
        },
        //分配
        async handleJuese(obj){
            this.fenpeis=obj
            // console.log(this.fenpeis);
            let {data}= await this.$http.get(`/api/private/v1/roles`)
            // console.log(data);
            this.fenPei=data;
            this.dialogVisibless=true;
        },
        //删除
        async handleDelete(_id){
            if (confirm('确定永久删除吗?')) {
                let  a= await this.$http.delete(`/api/private/v1/users/${_id}`);
                this.initTable();
            } 
        },
        //编辑更新
        async onUpdUser(){
            let {data}=await this.$http.put(`/api/private/v1/users/${this.bianJI.id}`,
            {"email":this.bianJI.email,"mobile":this.bianJI.mobile});
            this.initTable();
            this.dialogVisibles=false;
        },
        //编辑
        handleEdit(obj){
            this.bianJI=obj;
            this.dialogVisibles=true;
        },
        //状态
        async switchChange(user){
            // console.log(user);
            let ret= await this.$http.put(`/api/private/v1/users/${user.id}/state/${user.mg_state}`)
            if (ret.meta.status!=200) {
                row.mg_state=!row.mg_state
                return this.$message.error(ret.meta.msg)
            }
            this.$message.success(ret.meta.msg)
            this.initTable();
        },
        //添加
        async onAddUser(){
            let ret= await this.$http.post("/api/private/v1/users",this.form)
            if (ret.meta.status!=201) {
                return this.$message.error(ret.meta.msg)
            }
            this.$message.success(ret.meta.msg)
            this.initTable();
            this.dialogVisible=false;
            // console.log(data);
        },
        //添加
        onAdd(){
            this.dialogVisible=true;
        },
        //搜索
        async onSearch(){
            this.initTable();
        },
        //修改每页记录数
        handleSizeChange(val){
            this.params.pagesize=val*1;
            this.initTable();
        },
        //点击分页按钮
        handleCurrentChange(val){
            this.params.pagenum=val*1;
            this.initTable();   
        },
        async initTable(){
            let {data}=await this.$http.get("/api/private/v1/users",
            {params:this.params});
            this.userList=data.users;
            console.log(data);
            this.total=data.total;
        }
    },
    async mounted(){
        this.initTable();
    }
}
</script>

<style lang="scss" scoped>
        .to{
            
            display: flex;
            flex-direction: row;
            // margin-left: 20px;
        }
        .demo-form-inline{
            display: flex;
            flex-direction: row;
        }
        .a{
            width: 100%;
            height: 60px;
            background-color: #e0e5ee;
            text-align: center;
            line-height: 60px;
        }
        .b{
            display: flex;
            flex-direction: row;
            font-size: 20px;
        }
        .c{
            display: flex;
            right: -90px;
        }
</style>